/*
* @Author: zhangsai
* @Date: 2018/5/11
* @description:  上传文件
*/
<template>
  <div>
    <el-button type="primary" @click="dialogVisible=true">{{title}}</el-button>
    <el-dialog title="上传文件"
      append-to-body
      :visible.sync="dialogVisible"
      @close="close"
      width="30%"
      append-to-body>
      <div>
        <el-upload
          class="upload-demo"
          ref="upload"
          action="https://chinaventure.oss-cn-beijing.aliyuncs.com/"
          :data="data"
          multiple
          :before-upload="beforeUpload"
          :auto-upload="false"
          :on-remove="handleRemove"
          :on-change="change"
          :on-success="handleSuccess"
        >
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传pdf/word/excel文件，且不超过20MB</div>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" round>取 消</el-button>
        <el-button type="primary" @click="submit" round>确 定</el-button>
      </div>     
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import BaseService from '../../service/common';
// import API from '../../service/common/api';
// import { csHttpUploadFile } from '../../service/formData';
interface Policy {
  key: string;
  policy: string;
  accessid?: string;
  success_action_status: string;
  callback: string;
  signature: string;
  name?: string;
  dir?: string;
  OSSAccessKeyId?: string;
}
@Component
export default class LogoImg extends Vue {
  @Prop({ default: '文件上传' })
  public title: string;
  // 初始化数据 相当于data
  public fileList = [];
  public typeList = ['doc', 'docx', 'pdf', 'xlsx', 'xls'];
  public multipleUploadSuccessRes: object[] = [];
  // refs
  public $refs: {
    upload: any
  };
  // 弹框开关
  public dialogVisible = false;
  // 授权 对象
  public policy = {} as Policy;
  public data = {} as Policy;
  // 生命周期
  public async mounted() {
    const policy = await BaseService.getPolicy();
    this.policy = JSON.parse(policy);
    this.data = Object.assign({}, {
                name: '${filename}',
                key: this.policy.dir + '${filename}',
                policy: this.policy.policy,
                OSSAccessKeyId: this.policy.accessid,
                success_action_status: '200',
                callback: this.policy.callback,
                signature: this.policy.signature,
            });
  }
  // 方法
  public submit() {
    this.$refs.upload.submit();
  }
  public beforeUpload(file: {name: string, size: number}) {
    const isLt20M = file.size / 1024 / 1024 < 20;
    const name = file.name.split('.');
    const type = name[name.length - 1];
    const isType = this.typeList.indexOf(type) !== -1;
    // 超过20M
    if (!isLt20M) {
        this.$message.error('上传文件大小不能超过 20MB!');
        return false;
    }
    if (!isType) {
        this.$message.error('不支持的文件类型');
        return false;
    }
    this.data.name = file.name;
    return isLt20M && isType;
  }
  public handleRemove(file: any, fileList: any) {
    this.fileList = fileList;
  }
  public change(file: any, fileList: any) {
    this.fileList = fileList;
  }
  // 上传成功
  public handleSuccess(response: any, file: any, fileList: any) {
    this.multipleUploadSuccessRes.push(file);
    if (this.multipleUploadSuccessRes.length === this.fileList.length) {
      const fileDirList: string[] = [];
      const fileNameList: string[] = [];
      this.fileList.map((item: {name: string}) => {
        fileDirList.push(this.policy.dir + item.name);
        fileNameList.push(item.name);
      });
      this.dialogVisible = false;
      this.$emit('onSuccess', fileDirList, fileNameList);
    }
  }
  public close() {
    this.fileList = [];
    this.multipleUploadSuccessRes = [];
    this.$refs.upload.clearFiles();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo-img{
  display:inline-block;
}
.ex-img-box{
  margin:0 auto;
  width:100%;
  height:400px;
}
</style>
